<clr-modal [(clrModalOpen)]="tokenModalOpened" class="copy-token"
           [clrModalStaticBackdrop]="true" [clrModalClosable]="true">
    <div class="modal-title">
        <span>{{"SYSTEM_ROBOT.REFRESH_SECRET" | translate}}</span>
        <div class="nav-divider"></div>
        <span class="name">{{robot?.name}}</span>
    </div>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <p class="mt-0">{{"SYSTEM_ROBOT.REFRESH_SECRET_SUMMARY" | translate}}</p>
        <section class="form-block show-info">
            <form #secretForm="ngForm" class="clr-form clr-form-horizontal">
                <div class="clr-form-control">
                    <label for="new-token" class="clr-control-label">{{"SYSTEM_ROBOT.NEW_TOKEN" | translate}}</label>
                    <div class="clr-control-container" [class.clr-error]="(newToken.dirty || newToken.touched) && newToken.invalid">
                        <div class="clr-input-wrapper">
                            <input class="clr-input"
                                   type="password" id="new-token"
                                   name="newToken"
                                   autocomplete="off"
                                   #newToken = "ngModel"
                                   [(ngModel)]="newSecret"
                                   pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                                   placeholder="{{'SYSTEM_ROBOT.PLACEHOLDER'| translate}}">
                        </div>
                        <clr-control-error *ngIf="(newToken.dirty || newToken.touched) && newToken.invalid">
                            {{'SYSTEM_ROBOT.SECRET' | translate}}
                        </clr-control-error>
                    </div>
                </div>
                <div class="clr-form-control">
                    <label for="confirm-token" class="clr-control-label">{{"SYSTEM_ROBOT.CONFIRM_SECRET" | translate}}</label>
                    <div class="clr-control-container" [class.clr-error]="notSame() || (confirmToken.dirty || confirmToken.touched) && confirmToken.invalid">
                        <div class="clr-input-wrapper">
                            <input class="clr-input"
                                   type="password" id="confirm-token"
                                   name="confirmToken"
                                   autocomplete="off"
                                   #confirmToken = "ngModel"
                                   [(ngModel)]="confirmSecret"
                                   pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                                   placeholder="{{'SYSTEM_ROBOT.SECRET_AGAIN'| translate}}">
                        </div>
                        <clr-control-error *ngIf="notSame() || ((confirmToken.dirty || confirmToken.touched) && confirmToken.invalid)">
                            <span *ngIf="!notSame()">{{'SYSTEM_ROBOT.SECRET' | translate}}</span>
                            <span *ngIf="notSame()">{{'SYSTEM_ROBOT.INCONSISTENT' | translate}}</span>
                        </clr-control-error>
                    </div>
                </div>
            </form>
        </section>
    </div>
    <div class="modal-footer">
        <button (click)="cancel()" id="refresh-token-cancel" type="button" class="btn btn-outline">{{'BUTTON.CANCEL'
            | translate}}</button>
        <button [disabled]="!canRefresh()" (click)="refreshToken()" [clrLoading]="btnState" id="refresh-token-refresh" type="button"  class="btn btn-primary">{{"SYSTEM_ROBOT.REFRESH" | translate}}</button>
    </div>
</clr-modal>
<clr-modal clrModalSize="lg" [(clrModalOpen)]="copyToken" class="copy-token"
           [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <div class="modal-title">
        <h3 class="modal-title">
            <clr-icon class="alert-icon success-icon" shape="check-circle" size="50"></clr-icon>
            {{ createSuccess | translate}}</h3>
    </div>
    <div class="modal-body">
        <div class="alert alert-info" role="alert">
            <div class="alert-items">
                <div class="alert-item static">
                    <div class="alert-icon-wrapper">
                        <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
                    </div>
                    <span class="alert-text">{{'ROBOT_ACCOUNT.ALERT_TEXT' | translate}}</span>
                </div>
            </div>
        </div>
        <section class="form-block show-info">
            <div class="form-group robot-name">
                <label class="form-group-label-override">{{'ROBOT_ACCOUNT.NAME'
                    | translate}}</label>
                <span>{{robot?.name}}</span>
            </div>
            <div class="form-group robot-token">
                <label class="form-group-label-override">{{'ROBOT_ACCOUNT.TOKEN' |
                    translate}}</label>
                <hbr-copy-input (onCopySuccess)="onCpSuccess($event)"
                                inputSize="50" headerTitle=""
                                defaultValue="{{robot?.secret}}" class="copy-input"></hbr-copy-input>
            </div>
            <a [href]="downLoadHref" [download]="downLoadFileName"><button class="btn mr-0" (click)="closeModal()">{{'ROBOT_ACCOUNT.EXPORT_TO_FILE' | translate}}</button></a>
        </section>
    </div>
</clr-modal>